<template>
	<view class="coupon">
		<div class="item" v-for="(item, index) in pageResult.list" :key="index">
			<div class="left">
				<p>
					<i>￥</i>
					<b>{{item.money}}</b>
				</p>
				<p>{{item.type==1 ? (item.at_least > 0 ? "买满"+item.at_least+"元" : "无金额门槛") : "折扣优惠券"}}</p>
				<label>{{item.type_name}}</label>
			</div>
			<div class="right">
				<p>{{item.title}}</p>
				<p>至{{item.get_end_time}}</p>
				<p>{{item.remark}}</p>
				<!-- <p class="red">仅剩1天</p> -->
				<label @click="receiveCouponFun(index)">{{item.myGet == 1 ? "已领取" : "立即领取"}}</label>
			</div>
		</div>
	</view>
</template>

<script>
import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					merchantId: 0,
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getList() {
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/marketing/coupon-type/list',
						data: self.pageParam
					})
					.then(res => {
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			receiveCouponFun(index) {
				if(uni.getStorageSync('access-token') == '') {
					common.jump('login');
					return ;
				}
				var couponItem = this.pageResult.list[index];
				if(!couponItem || couponItem.is_get == 0) {
					return ;
				}
				serve
					.request({
						url: '/marketing/coupon-type/create',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id : couponItem.id
						}
					})
					.then(res => {
						uni.showToast({
							title: res.message,
							icon : 'none'
						});
						if(res.code == 200) {
							this.$set(this.pageResult.list[index], 'is_get', 0);
							this.$set(this.pageResult.list[index], 'myGet', 1);
						}
					});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.pageParam.merchantId = options.id || 0,
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style lang="scss">
.coupon {
	padding: 40rpx 30rpx;

	.item {
		width: 690rpx;
		height: 210rpx;
		background: url(https://hdsq.aoorange.cn/attachment/xcx/my/icon_coupon_back.png);
		background-size: 100% auto;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 40rpx;

		p,
		label {
			display: block;
		}

		.left {
			text-align: center;
			color: #fff;
			width: 226rpx;
			height: 210rpx;
			font-size: 20rpx;

			p {
				&:nth-child(1) {
					margin-top: 40rpx;
					b {
						font-size: 60rpx;
					}
				}
			}

			label {
				width: 100rpx;
				height: 30rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 15rpx;
				margin: 5rpx auto;
			}
		}

		.right {
			flex: 1;
			margin-left: 10rpx;
			p {
				color: #999999;
				&:nth-child(1) {
					color: #333333;
					font-size: 28rpx;
				}
				&:nth-child(2) {
					font-size: 24rpx;
					margin-top: 20rpx;
				}
				&:nth-child(3) {
					font-size: 20rpx;
					margin-top: 39rpx;
				}
			}

			.red {
				color: #ff5f60;
			}

			label {
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
				width: 140rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background: rgba(255, 99, 100, 1);
				border-radius: 24rpx;
				color: #fff;
				font-size: 24rpx;
			}
		}
	}
	
	
}
</style>
